<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
    <script type="text/javascript">
         $(function () {
            $('#newNav').click(function(){
                let pageNum = $("#currentPageInput").val();
                window.location.href="/User/addUser.html?pageNum=" + pageNum;
             });
             $("#clearInput").click(function () {
                 var inputs = $("#formQuery").find("input");
                 inputs.each(function () {
                     $(this).val('');
                 });
             })
        });
        function checkall(){
                var alls=document.getElementsByName("check");
                var ch=document.getElementById("checkall");
                if(ch.checked){
                    for(var i=0;i<alls.length;i++){
                        alls[i].checked=true;
                    }
                }else{
                    for(var i=0;i<alls.length;i++){
                        alls[i].checked=false;
                    }
                }
            }
		function delAll() {
            var alls = document.getElementsByName("check");
            var ids = new Array();
            for (var i = 0; i < alls.length; i++) {
                if (alls[i].checked) {
                    ids.push(alls[i].value);
                }
            }
            if (ids.length > 0) {
                if (confirm("确认批量删除用户操作?")) {
                    // alert(ids)
                    $.ajax({
                        url: "/multiShanchuyonghu",
                        data: JSON.stringify({
                            userids: ids,
                        }),
                        type: "POST",
                        // contentType : "application/json;charset=UTF-8",
                        contentType: "application/json",
                        dataType: "JSON",
                        success: function (vo) {
                            if (vo.code == 200) {
                                alert(vo.message);
                                window.location.href = "/User/index.html";
                            } else {
                                alert(vo.message);
                            }
                        }
                    })
                } else {
                    alert("请选中要删除的项");
                }
            }
        }
    </script>
</head>
<body>
<form id="formQuery" class="form-inline definewidth m20">
    用户名称：
    <input type="text" name="username" id="username"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;  
    <button id="queryBtn" type="button" class="btn btn-primary">查询</button>
    <input type="text" id="currentPageInput" name="pageNumInput" style="display: none" value="1">
</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>用户账户</th>
        <th>真实姓名</th>
        <th>角色</th>
        <th  width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<table class="table table-bordered table-hover definewidth m10" >
  	<tr>
        <th colspan="5">
            <div class="inline pull-right page">
                <a id="firstPage" href='javascript:void(0)' onclick="changeCurrentPage(1)">第一页</a>
                <a id="prePage" href="javascript:void(0)">上一页</a>
                <div id="a_pageNums" style="display: inline">
                </div>
                <a id="nextPage" href="javascript:void(0)">下一页</a>
                <a id="lastPage" href='javascript:void(0)'>最后一页</a>
                &nbsp;&nbsp;&nbsp;共<span id="total" class='current'></span>&nbsp;条记录
                <span id="pageNum" class='current'></span>
                <span class='current'>/</span>
                <span id="pages" class='current'></span>&nbsp;页
            </div>
            <div>
                <button type="button" class="btn btn-success" id="newNav">添加用户</button>&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中
                </button>
            </div>
        </th>
    </tr>
  </table>
</body>
<script type="text/javascript">
    let userid = getQueryVariable("userid");
    $(function () {
        let pageNum = getQueryVariable("pageNum");
        if (pageNum == null || pageNum == "") pageNum = 1;
        changeCurrentPage(pageNum);
        fleshData();
    })
    $("#queryBtn").click(function (){
        fleshData();
    })
    function fleshData() {
        // alert($("#formQuery").serialize());
        $.ajax({
            type: "GET",
            url: "/user/list",
            data: $("#formQuery").serialize(),
            dataType:"JSON",
            success:function (vo) {
                //页码信息
                let pageInfo = vo.pageInfo;

                //总条目数
                $("#total").html("");
                $("#total").html(pageInfo.total);
                //总页数
                $("#pages").html("");
                $("#pages").html(pageInfo.pages);
                //当前页码
                $("#pageNum").html("")
                $("#pageNum").html(pageInfo.pageNum)
                //添加各个页码
                $("#a_pageNums").html("");
                for (let i = 1; i <= pageInfo.pages; i++) {
                    if (i != pageInfo.pageNum){
                        $("#a_pageNums").append("<a " + "href=javascript:void(0); onclick = changeCurrentPage(" + i + ")>" + i +"</a> ")
                    } else {
                        $("#a_pageNums").append("<span class='current'>" + i +"</span>")
                    }
                }
                //设置第一页、最后一页、上一页和下一页
                let prePage = pageInfo.prePage == 0? 1:pageInfo.prePage;
                $("#prePage").attr("onclick", "changeCurrentPage(" + prePage + ")");

                let nextPage = pageInfo.pageNum == pageInfo.pages? pageInfo.pages:pageInfo.pageNum+1;
                $("#nextPage").attr("onclick", "changeCurrentPage(" + nextPage + ")");
                $("#lastPage").attr("onclick", "changeCurrentPage(" + pageInfo.pages + ")");

                //填充页面内容
                let list = pageInfo.list;
                console.log(list)
                $("#tbody").html("");
                for (let i = 0; i < list.length; i++) {
                    let user = list[i].hospusers;
                    let role = list[i].role;
                    let infos = "";
                    //只有“状态”是“在用”的才能退号
                    let shanchu = "";
                    if (user.zt == 1){
                        shanchu = "<a href='javascript:void(0);' onclick=shanchu(" + user.userid + ")>" + " 删除 " + "</a>";
                    }
                    infos += "<tr>" +
                        "<td style='vertical-align: middle;'><input type='checkbox' name='check' value=" + user.userid +"></td>" +
                        "<td style='vertical-align: middle;'>" + user.username + "</td>" +
                        "<td style='vertical-align: middle;'>" + user.realname + "</td>" +
                        "<td style='vertical-align: middle;'>" + role.rolename + "</td>" +
                        // "<input style='display: none' id='blh' value=" + "\'" + list[i].blh
                        "<td style='vertical-align: middle;'>" +
                        "<a href='javascript:void(0);' onclick=modifyUser(" + user.userid + "," + role.roleid + ")>" + " 编辑 " + "</a>" +
                        shanchu +
                        "</td>" +
                        "</tr>"
                    $("#tbody").append(infos);
                }
            }
        })
    }

    //将form表达里的currentPageInput值更改为参数里的值,随后发起请求
    function changeCurrentPage(wantedPageNum) {
        // alert(wantedPageNum);
        $("#currentPageInput").val(wantedPageNum);
        fleshData();
    }

    //从url里获取参数，window.location.search.search从问号(?)开始的 URL（查询部分）
    function getQueryVariable(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return false;
    }

    //更改挂号详情
    function modifyUser(uid, roleid){
        let pageNum = $("#currentPageInput").val();
        window.location.href = "/User/editUser.html?userid=" + uid + "&roleid=" + roleid + "&pageNum="+pageNum+"&pageSize="+5;
    }

    //退号操作
    function shanchu(uid) {
        if (confirm("确认停用此账户吗？")){
            $.ajax({
                url:"/shanchuyonghu",
                data:{
                    userid:uid,
                    _method:"PUT"
                },
                dataType:"JSON",
                type:"POST",
                success:function (vo) {
                    if (vo.code == 200){
                        alert("账户停用成功！");
                        // alert("pageNum:"+$("#currentPageInput").val());
                        window.location.href = "/User/index.html?pageNum=" + $("#currentPageInput").val();
                    } else{
                        alert(vo.message);
                    }
                }
            })
        };
    }
</script>
</html>